import React, { Component } from 'react';
import { message, Card, Button, Select, Radio, Spin, Row, Col } from 'antd';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { generateProfitChartOption } from '@/utils/echarts-figures.js';
import getUrlParam from '@/utils/getUrlParam';

const RadioGroup = Radio.Group;
const Option = Select.Option;

class FreeDrawChart extends Component {
  static propTypes = {
    namespace: PropTypes.string.isRequired,
    chartId: PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      // chartId: 'profitChart',
      item: '', // 展示的科目
      itemCheck: [],
      items: [
        '营业收入',
        '利息收入',
        '营业成本',
        '利息支出',
        '营业税金及附加',
        '销售费用',
        '管理费用',
        '财务费用',
        '资产减值损失',
        '公允价值变动收益',
        '投资收益',
        '对联营企业和合营企业的投资收益',
        '汇兑收益',
        '营业利润',
        '营业外收入',
        '营业外支出',
        '所得税费用',
        '净利润',
        '销售商品、提供劳务收到的现金',
        '收到其他与经营活动有关的现金',
        '购买商品、接受劳务支付的现金',
        '支付给职工以及为职工支付的现金',
        '支付的各项税费',
        '支付其他与经营活动有关的现金',
        '收回投资收到的现金',
        '取得投资收益收到的现金',
        '处置固定资产、无形资产和其他长期资产收回的现金净额',
        '处置子公司及其他营业单位收到的现金净额',
        '收到其他与投资活动有关的现金',
        '购建固定资产、无形资产和其他长期资产支付的现金',
        '投资支付的现金',
        '取得子公司及其他营业单位支付的现金净额',
        '支付其他与投资活动有关的现金',
        '交易性金融资产',
        '其他流动资产',
        '可供出售金融资产',
        '长期股权投资',
        '固定资产',
        '在建工程',
        '无形资产',
        '商誉',
        '长期待摊费用',
        '递延所得税资产',
        '其他非流动资产',
        '资产总计',
        '短期借款',
        '应付票据',
        '应付账款',
        '预收账款',
        '一年内到期的非流动负债',
        '流动负债合计',
        '长期借款',
        '应付债券',
        '长期应付款',
        '递延所得税负债',
        '其他非流动负债',
        '非流动负债合计',
        '实收资本(或股本)',
        '资本公积',
        '盈余公积',
        '未分配利润',
        '少数股东权益',
        '货币资金',
        '预付账款',
        '存货',
        '应收账款',
        '应收票据',
        '其他应收款',
        '应付职工薪酬',
        '其他应付款',
      ],
      compareCmp: '', // 对比公司
      currentTime: 'q1',
      timeParam: '单季度',
      radioValue: '', //数据类型
    };
  }

  componentDidMount() {
    const { dispatch, namespace } = this.props;
    if (namespace === 'self') {
      // 获取本公司的数据
      dispatch({
        type: 'comparison/getCompanyInfo',
        payload: {
          // secu_code: getUrlParam('secu_code'),
        },
      });
    } else if (namespace === 'compare') {
      // 获取所有可以对比的公司
      dispatch({
        type: 'comparison/getAllCompanies',
        payload: {
          // secu_code: getUrlParam('secu_code'),
        },
      });
    }
  }

  onSelectChange(value) {
    if (value == '单季度') {
      this.setState({
        currentTime: 'q1',
      });
    } else {
      this.setState({
        currentTime: 'q4',
      });
    }
    this.setState({
      timeParam: value,
    });
  }

  onSelectItem(values) {
    this.setState({
      item: values,
    });
  }

  onSelectCmp(values) {
    this.setState({
      compareCmp: values,
    });
  }

  onRadioChange(e) {
    if (e.target.value !== '原始数据') {
      this.setState({
        type: e.target.value,
      });
    } else {
      this.setState({
        type: '',
      });
    }
    this.setState({
      radioValue: e.target.value,
    });
  }

  onSubmit() {
    const { item, radioValue, timeParam, compareCmp } = this.state;
    const { namespace, chartId } = this.props;
    const name = item + '-' + radioValue + '-' + timeParam;
    if (this.checkExist(name)) {
      message.error('您已经绘制相同参数图表');
      return;
    }
    this.props.dispatch({
      type: 'drawPage/drawChart',
      payload: {
        namespace,
        chartId,
        compareCmp,
        type: radioValue, // type 数据类型
        item, // 展示的科目
        timeParam, // 时间区间
        //secu_code: getUrlParam('secu_code'),
      },
    });
  }

  onResetItem() {
    this.setState({
      radioValue: '',
      item: '',
      compareCmp: '',
    });
  }

  onResetArea() {
    const { namespace, chartId } = this.props;
    this.setState({
      itemCheck: [],
    });
    this.props.dispatch({
      type: 'drawPage/resetData',
      namespace,
      payload: {
        chartId,
      },
    });
  }

  checkExist(item) {
    let { itemCheck } = this.state;
    if (itemCheck.indexOf(item) == -1) {
      itemCheck.push(item);
      this.setState({
        itemCheck,
      });
      return false;
    }
    return true;
  }

  render() {
    // const time=['单季度','一年'];
    const { companies, cmp, namespace } = this.props;
    // console.log('companies cmp:', companies, cmp);
    const itemOptions = this.state.items.map((item, i) => (
      <Option value={item} key={`${item}i`}>
        {item}
      </Option>
    ));
    let curCompany = null;
    if (namespace === 'self') {
      curCompany = cmp.name;
    } else {
      const options = companies.map(d => <Option key={d[1]}>{d[0]}</Option>);

      curCompany = (
        <Select
          style={{ width: '200px' }}
          placeholder="输入股票名称或代码查询"
          defaultActiveFirstOption={false}
          filterOption={false}
          value={this.state.compareCmp}
          onChange={this.onSelectCmp.bind(this)}
        >
          {options}
        </Select>
      );
    }
    return (
      <div className="chart-container" style={{ marginRight: '15px' }}>
        <Card>
          <div style={{ height: '160px' }}>
            <Row>
              当前公司：
              {curCompany}
            </Row>
            <Row type="flex" style={{ marginTop: '10px' }}>
              <Col span={7}>
                <span>选择展示的科目:</span>
              </Col>
              <Col span={8} style={{ marginRight: '5px' }}>
                <Select
                  style={{ width: '100%' }}
                  multiple={false}
                  // showSearch={true}
                  value={this.state.item}
                  onChange={this.onSelectItem.bind(this)}
                >
                  {itemOptions}
                </Select>
              </Col>
              <Col span={6}>
                <Select
                  style={{ width: '100%' }}
                  value={this.state.timeParam}
                  onChange={this.onSelectChange.bind(this)}
                >
                  <Option value="单季度" key="单季度">
                    单季度
                  </Option>
                  <Option value="一年" key="一年">
                    一年
                  </Option>
                </Select>
              </Col>
            </Row>

            <RadioGroup
              style={{ marginTop: '10px' }}
              value={this.state.radioValue}
              onChange={this.onRadioChange.bind(this)}
            >
              <Radio id="origin" value="原始数据">
                原始数据
              </Radio>
              <Radio id="tong" value="同比">
                同比
              </Radio>
              <Radio id="ring" value="环比">
                环比
              </Radio>
              <Radio id="profit" value="净利润占比">
                净利润占比
              </Radio>
              <Radio id="cash" value="营业收入占比">
                营业收入占比
              </Radio>
              <Radio id="asset" value="总资产占比">
                总资产占比
              </Radio>
            </RadioGroup>
            <Row style={{ margin: '15px 0 0 10px' }}>
              <Button style={{ margin: '3px 0 30px 30px' }} onClick={this.onSubmit.bind(this)}>
                提交
              </Button>
              <Button style={{ margin: '3px 0 30px 30px' }} onClick={this.onResetItem.bind(this)}>
                重置选项
              </Button>
              <Button style={{ margin: '3px 0 30px 30px' }} onClick={this.onResetArea.bind(this)}>
                重置作图区
              </Button>
            </Row>
          </div>
          <div id={this.props.chartId} style={{ width: '100%', height: '500px' }}>
            {this.state.message && (
              <div
                style={{
                  fontSize: '25px',
                  height: '500px',
                  lineHeight: '500px',
                  textAlign: 'center',
                }}
              >
                没有相关数据
              </div>
            )}
          </div>
        </Card>
      </div>
    );
  }
}

export default connect(({ comparison }) => ({
  cmp: comparison.cmp,
  companies: comparison.companies,
}))(FreeDrawChart);
